<template>
  <Card title="身份背景" :padding="[32]" :show-divider="false">
    <view class="hb-flex hb-flex-wrap hb-gap-2 hb-mt-3">
      <view
        v-for="item in socialIdentityList"
        :key="item"
        class="hb-px-3 hb-py-1 hb-text-sm hb-rounded-[8rpx] hb-bg-[#D0F7FF] hb-text-[#2878FF]"
      >
        {{ item }}
      </view>
    </view>
  </Card>
</template>

<script setup lang="ts">
  import Card from '../../components/Card/index.vue';

  interface IdentityBackgroundProps {
    socialIdentityList: string[];
  }

  defineProps<IdentityBackgroundProps>();
</script>
